<template>
  <ul>
    <li>
      <p>问：什么是动态路由？</p>
      <p>答：</p>
      <duPre :code="code00"></duPre>
      <p>问：如何实现动态路由？</p>
      <p>答：</p>
      <duPre :code="code0"></duPre>
      <p>第一步1：</p>
      <duPre :code="code1"></duPre>
      <p>第二步2:</p>
      <duPre :code="code2"></duPre>
      <duPre :code="code22"></duPre>
      <p>第三步3：</p>
      <duPre :code="code3"></duPre>
    </li>
    <li></li>
  </ul>
</template>

<script setup>
import { useGlobal } from '@/hooks/system/useGlobal'
const { globalProperties } = useGlobal()
console.log(globalProperties.$router.getRoutes())

const code00 = `
动态路由就是：通过接口获取的菜单数据，动态生成的路由。也就是根据菜单生成的路由

`

const code0 = `
src/hooks/useAsyncRoute.js
关键代码：获取views/main文件夹下的所有组件
const directives = import.meta.glob('../views/main/**/*.vue')
`
const code1 = `
  const directives = import.meta.glob('../views/main/**/*.vue')
  directives = {
                "../views/main/dashboard/index.vue": () => import("/hzs/src/views/main/dashboard/index.vue"),
                "../views/main/module1/menu1/test1/test1-1.vue": () => {…},
                "../views/main/module1/menu1/test1/test1-2.vue": () => {…},
                ...
                }
  /*
  转换至存储组件的Map，componentMap
  */

  componentMap = [["/dashboard/index", () => import("/hzs/src/views/main/dashboard/index.vue")],
                  ["/moduleManual/pzwj", () => import("/hzs/src/views/main/moduleManual/pzwj.vue")],
                  ["/module_setup/await", () => import("/hzs/src/views/main/module_setup/await.vue")],
                  ...]
`
const code2 = `
 /*
  根据menuStore.modules数据，遍历到所有菜单得到Map，menuPathMap
  注意：这里排除了外联和白名单的菜单
  */
`
const code22 = `
  menuPathMap = [["/dashboard/index",  {isTopmenu: true,meta: {title: '首页', cache: true},path: "index"} ],
                 ["/moduleManual/menu/apiData/test1-1", {path: 'test1-1', meta: {…}, children: Array(0)} ],
                 ["/moduleManual/menu/apiData/test1-2", {path: 'test1-2', meta: {…}, children: Array(0)} ],
                 ...]
`

const code3 = `
  /*
  根据menuPathMap，与componentMap，结合得到路由menuRoutes
  */

  menuRoutes = [
  { "path": "/dashboard/index", "name": "/dashboard/index", "meta": {title: '首页', cache: true, usePathKey: true}, "component": () => import("/hzs/src/views/main/dashboard/index.vue")},
  { "path": "/moduleManual/menu/apiData/test1-1", "name": "/moduleManual/menu/apiData/test1-1", "meta": {title: '数据说明', cache: false, usePathKey: true}, "component": () => {…}}
  ...
  ]
`
</script>

<style scoped>
p {
  line-height: 24px;
}
li {
  margin-bottom: 40px;
}
</style>
